<template>
    <div>
        <el-row>
            <img :src="require('../../assets/yyt/img-01.jpg')">
        </el-row>
        <el-row>
            <el-steps :active="1" finish-status="success" simple style="width: 50%;margin-top:20px;margin-left:100px">
                <el-step title="1.填写号码、金额"></el-step>
                <el-step title="2.确认并支付"></el-step>
                <el-step title="3.完成"></el-step>
            </el-steps>
        </el-row>
        <el-row style="margin-top:20px;margin-left:200px">
            充值号码: <el-input v-model="phone" placeholder="请输入11位移动手机号码" style="width: 300px;"
                @input="checkPhone"></el-input>
        </el-row>
        <el-row style="margin-top: 5px; margin-left: 200px">
            <span v-if="phone && !validPhone" style="color: red;">请输入有效的11位手机号码</span>
        </el-row>
        <el-row style="margin-top:20px;margin-left:200px">
            充值金额:
            <el-button @click="rechargeAmount(10)" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                10元
            </el-button>
            <el-button @click="rechargeAmount(30)" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                30元
            </el-button>
            <el-button @click="rechargeAmount(50)" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                50元
            </el-button>
            <el-button @click="rechargeAmount(100)" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                100元
            </el-button>
            <el-button @click="rechargeAmount(200)" type="primary" plain style="width: 70px; height: 30px;"
                class="centered-text-button">
                200元
            </el-button><br>
            <el-button @click="rechargeAmount(300)" type="primary" plain
                style="width: 70px; height: 30px;margin-left:73px;margin-top:10px" class="centered-text-button">
                300元
            </el-button>
            <el-button @click="rechargeAmount(400)" type="primary" plain
                style="width: 70px; height: 30px;margin-top:10px" class="centered-text-button">
                400元
            </el-button>
            <el-button @click="rechargeAmount(500)" type="primary" plain
                style="width: 70px; height: 30px;margin-top:10px" class="centered-text-button">
                500元
            </el-button>
            <el-input v-model="customAmount" @input="handleInput" style="width: 70px; height: 30px;margin-left:10px">

            </el-input>
        </el-row>
        <el-row style="margin-top:20px;margin-left:200px">
            <div style="display: flex;">
                <span>优惠类型:&nbsp;</span>
                <el-tabs type="border-card">
                    <el-tab-pane label="优惠券">
                        <div style="overflow-y: auto; height:150px;width:350px">
                            <template v-if="couponData.length">
                                <div v-for="coupon in couponData" :key="coupon.id"
                                    style="display: flex; align-items: center;">
                                    <div class="coupon" :id="'coupon-' + coupon.id">
                                        <div class="discount">{{ coupon.conditions }}元-{{ coupon.value }}元</div>
                                        <div class="validity">有效期至: {{ coupon.endAt }}</div>
                                        <div class="details">{{ coupon.description }}</div>
                                    </div>&nbsp;&nbsp;&nbsp;
                                    <el-radio v-model="selectedCoupon" :label="coupon.id" @change="selectCoupon(coupon)"
                                        :disabled="coupon.disabled"></el-radio>
                                </div>
                            </template>
                            <div v-else>
                                暂无优惠券
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-row>
        <el-row style="margin-top:20px;margin-left:200px">
            <div style="display: flex;">
                支付金额:<div style="color: red;">￥{{ finalAmount }}</div>
            </div>
        </el-row>
        <el-row style="margin-top:20px;margin-left:200px">
            <div style="display: flex;">
                实际到账:<div>￥{{ price }}</div>
            </div>
        </el-row>
        <el-row style="margin-top:50px;margin-left:400px">
            <el-button @click="startRecharge" type="primary">开始充值</el-button>
        </el-row>
        <div class="full-screen-mask" v-if="loading">
            <div style="background-color: white; padding: 20px; border-radius: 5px;">
                <el-spinner :size="150" :text="'正在创建订单...'" />
                <p style="margin-top: 10px;">请稍候，正在为您创建订单。</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            price: '',
            phone: '',
            validPhone: true,
            orderNum: '',
            loading: false,
            order: {},
            userPhone: '',
            user: {

            },
            couponData: [],
            selectedCoupon: '',
            couponDiscount: '',//折扣金额
            usageConditions: '',//使用条件
            finalAmount: '',
            customAmount: ''//自定义金额
        }
    },
    methods: {
        handleInput() {
            this.price = this.customAmount;
            this.finalAmount = this.customAmount;
        },
        rechargeAmount(val) {
            this.selectedCoupon = '';
            this.finalAmount = '';
            this.usageConditions = '';
            this.price = val;
            if (!this.selectedCoupon) {
                this.finalAmount = this.price
            }
            // 检查所有的优惠券，如果优惠券的使用条件大于输入的金额，将其禁用
            this.couponData = this.couponData.map(coupon => ({
                ...coupon,
                disabled: coupon.usageAmount > val,  // 新增
            }));
        },
        selectCoupon(coupon) {
            this.selectedCoupon = coupon.id;
            this.couponDiscount = coupon.value; // 优惠券的折扣金额
            this.usageConditions = coupon.usageAmount;
            if (this.price >= this.usageConditions) {
                this.finalAmount = this.price - this.couponDiscount
            }
        },
        checkPhone() {
            const phoneRegex = /^1[3-9]\d{9}$/;
            this.validPhone = phoneRegex.test(this.phone);
        },
        startRecharge() {
            if (!this.phone) {
                this.$message.error("请填写正确的手机号");
                return;
            }
            if (!this.price) {
                this.$message.error("请选择充值金额");
                return;
            }
            if (this.price < this.usageConditions) {
                this.$message.error("优惠券不可用");
                return;
            }
            let param = {};
            param.phone = this.phone;
            param.price = this.finalAmount;
            param.totalPrice = this.price;
            // 开启遮罩
            this.loading = true;
            this.$axios.post('api/rabbit/addRechargeOrder', param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.orderNum = res.data.data
                        setTimeout(() => {
                            this.queryOrder();
                        }, 3000);
                    } else {
                        this.$message.error('充值订单创建失败');
                        this.loading = false; // 创建订单失败时停止加载状态
                    }
                })
        },
        queryOrder() {
            this.$axios.get('api/productOrder/queryOrderByOrderNum?orderNum=' + this.orderNum)
                .then(res => {
                    if (res.data.code == 200) {
                        this.order = res.data.data
                        if (this.order) {
                            localStorage.setItem('order', JSON.stringify(this.order));
                            console
                            this.$router.push({ path: '/confirm', query: { id: this.selectedCoupon } });
                        }
                    }
                })
        },
        //查用户优惠券
        queryCoupon() {
            this.$axios.get('api/zgyd-jifen/queryUsersCoupon/' + this.user.id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.couponData = res.data.data.filter(item => item.sortId === 4)
                        console.log(this.couponData)
                    }
                })
        },
        queryUser() {
            let param = new URLSearchParams();
            param.append("phone", this.userPhone);
            this.$axios.post('api/zgyd-user/queryUser', param)
                .then(res => {
                    if (res.data.code == 200) {
                        this.user = res.data.data
                        this.queryCoupon();
                    }
                })
        }
    },
    created() {
        this.userPhone = localStorage.getItem('username')
        this.queryUser();
    },
}
</script>
<style scoped>
.centered-text-button {
    text-align: center;
    /* 水平居中 */
    line-height: 10px;
    /* 垂直居中 */
}

.coupon {
    width: 200px;
    height: 100px;
    background-color: #8b0000;
    /* 暗红色 */
    border: 2px dashed #ccc;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon .left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.coupon .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.coupon .discount {
    font-size: 24px;
    color: #ff0000;
    /* 红色 */
    margin-right: 10px;
}

.coupon .details {
    font-size: 14px;
    color: #fff;
    /* 白色 */
}

.coupon .validity {
    font-size: 14px;
    color: #fff;
    /* 白色 */
}

.full-screen-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明黑色背景 */
    z-index: 9999;
    /* 确保遮罩位于其他内容之上 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.index {
    visibility: hidden;
}
</style>